<template>
  <div id="busTopoGraph"></div>
</template>
<script>
import graph from "common/topo/graph";
import eventHubs from "common/eventHubs";
import imgNode from "assets/img/topo/node_merge.svg";
import imgLink from "assets/img/topo/link.svg";
import imgTree from "assets/img/topo/tree_icon.svg";
export default {
  props: {
    hasOverView: {
      style: Boolean,
      default: function() {
        return true;
      }
    },
    hasTreeView: {
      style: Boolean,
      default: function() {
        return true;
      }
    }
  },
  mounted() {
    this.initTopoGraph();
  },
  methods: {
    initTopoGraph() {
      const self = this;
      const graphObj = graph.createGraph();
      const graphView = graphObj.graphView;
      const dataModel = graphView.getDataModel();

      const collapsed = this.$store.state.home.collapsed;

      const graphV = graphView.getView();
      graphV.className = collapsed ? "graphyClass2" : "graphyClass";
      $("#busTopoGraph").append(graphV);
      // 事件处理
      eventHubs.getEventHub().$on("collapsedChange", collapsed => {
        //Hub接收事件
        graphV.className = collapsed ? "graphyClass2" : "graphyClass";
      });

      if (this.hasTreeView) {
        // 树结构
        const treeView = new ht.widget.TreeView(dataModel);
        treeView.expandAll();
        treeView.setRowHeight(20);
        treeView.setIndent(20);
        function getLabel(data) {
          var label = data.getStyle("label");
          return label === undefined ? data.getName() : label;
        }
        function fromLabel(n) {
          if (n instanceof ht.Edge) {
            if (n.getSource() == undefined || n.getTarget() == undefined) {
              return n.getName();
            } else {
              return getLabel(n.getSource()) + "->" + getLabel(n.getTarget());
            }
          } else {
            return getLabel(n);
          }
        }
        treeView.enableToolTip();
        treeView.getLabel = function(data) {
          return fromLabel(data);
        };
        // treeView.getLabelFont = function(data){
        //     return '16px Helvetica, Arial, sans-serif';
        // };
        treeView.setSortFunc(function(data1, data2) {
          let label1 = fromLabel(data1);
          let label2 = fromLabel(data2);
          return label1.localeCompare(label2);
        });

        treeView.getIcon = function(data) {
          // console.log(data._image)
          if (data instanceof ht.Node) {
            return data._image ? data._image : imgNode;
          } else if (data instanceof ht.Edge) {
            return data._image ? data._image : imgLink;
          } else {
            return imgNode;
          }
        };
        eventHubs.getEventHub().$emit("topoTreeView", treeView);

        // 树面板
        const treePanel = new ht.widget.Panel({
          title: self.$t("Resource Tree"),
          restoreToolTip: self.$t("Resource Tree"),
          width: 260,
          narrowWhenCollapse: true,
          contentHeight: window.innerHeight * 0.5,
          minimized: true,
          titleIcon: imgTree,
          titleIconSize: 24,
          resizeMode: "wh",
          titleBackground: "#EFF2F7",
          titleColor: "#1F2D3D",
          content: treeView.getView(),
          buttons: ["minimize", "toggle"]
        });

        treePanel.setPositionRelativeTo("rightTop");
        treePanel.setPosition(35, 60);
        $("#topo").append(treePanel.getView());
      }

      if (this.hasOverView) {
        const overView = graphObj.overView;
        const overV = overView.getView();
        overView.setAutoUpdate(true);
        overV.className = collapsed
          ? "overview2 animation"
          : "overview animation";
        $("#busTopoGraph").append(overV);

        // 事件处理
        eventHubs.getEventHub().$on("collapsedChange", collapsed => {
          //Hub接收事件
          overV.className = collapsed
            ? "overview2 animation"
            : "overview animation";
        });
      }
    }
  }
};
</script>
